<template>
	<view class="the-page">
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<uni-forms :model="userForm" ref="form1">
			<uni-forms-item label="Id" required>
				<uni-easyinput type="text" v-model="userForm.id" disabled></uni-easyinput>
			</uni-forms-item>

			<uni-forms-item label="用户" prop="name" required>
				<uni-easyinput type="text" v-model="userForm.name" placeholder="请输入用户"></uni-easyinput>
			</uni-forms-item>

			<uni-forms-item label="邮箱" prop="email" required>
				<uni-easyinput type="text" v-model="userForm.email" placeholder="请输入邮箱"></uni-easyinput>
			</uni-forms-item>

			<uni-forms-item label="电话" prop="phone" required>
				<uni-easyinput type="text" v-model="userForm.phone" placeholder="请输入电话"></uni-easyinput>
			</uni-forms-item>

			<uni-forms-item label="性别" prop="gender">
				<uni-data-checkbox v-model="userForm.gender" :localdata="genders" />
			</uni-forms-item>
			<uni-forms-item label="昵称">
				<uni-easyinput type="text" placeholder="请输入昵称" v-model="userForm.nickName"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="头像">

				<uni-file-picker :value="fileList" limit="1" :del-icon="true" disable-preview :imageStyles="imageStyles"
					file-mediatype="image" @select="onSelect" @progress="onProgress" @success="onSuccess" @fail="onFail"
					@delete=onDelete>选择</uni-file-picker>

				<!-- <u-upload name="avatar" :fileList="fileList" :maxCount="1" @afterRead="afterRead" @delete="deletePic" /> -->
			</uni-forms-item>
		</uni-forms>
		<button type="primary" @click="onSubmit">提交</button>

	</view>
</template>

<script>
	//导入用户接口
	import * as userAPI from '@/api/user.js';
	// import * as FileAPI from "@/api/file.js";
	import { getStorageUser, setStorageUser } from '@/utils/storage.js'; //本地存储数据

	export default {
		data() {
			return {
				userForm: {
					//表单中的字段名与数据库中用户表的字段名要求一致
					id: null,
					name: '',
					email: '',
					phone: '',
					gender: 1,
					avatar: '',
					nickName: ''
				},

				// 单选数据源
				genders: [{
					text: '男',
					value: 1
				}, {
					text: '女',
					value: 0
				}],

				//上传图片后回显
				fileList: [],

				rules: {
					name: {
						type: 'string',
						required: true,
						pattern: /^[a-z0-9]{3,12}$/i,
						message: '3-12字符',
						trigger: ['blur', 'change']
					},
					email: {
						type: 'email',
						required: true,
						message: '无效的邮箱地址',
						trigger: ['blur', 'change']
					},
					phone: {
						type: 'string',
						required: true,
						pattern: /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/,
						message: '无效的手机号码',
						trigger: ['blur', 'change']
					}
				},

				imageStyles: {
					width: 64,
					height: 64,
					border: {
						radius: '50%'
					}
				},
			};
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.form1.setRules(this.rules);
		},

		//生命周期钩子函数，实例被创建好了后被调用 this.
		onLoad() {
			userAPI.getMyDetail().then(result => {
				console.log(result)
				this.userForm = result.data; //看接口文档，知道data是对应的用户对象

				//在上传图片组件中显示图片头像
				this.fileList = [];
				if (this.userForm.avatar) {
					this.fileList.push({
						url: this.userForm.avatar
					});
				}
			});
		},
		methods: {
			onSelect(params) {
				console.log("onSelect", params);
			},
			onSuccess(params) {
				console.log("onSuccess", params);
			},
			onProgress(params) {
				console.log("onProgress", params);
			},
			onFail(params) {
				console.log("onFail", params);
			},
			// 删除图片
			onDelete(params) {
				console.log("onDelete", params);
				return
			},


			//处理提交保存
			onSubmit() {
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				this.$refs.form1
					.validate()
					.then(valid => {
						if (valid) {
							//注意传递过去的参数user的属性名
							let user = this.userForm;
							userAPI.update(user).then(result => {
								let { id, name, avatar } = user;
								setStorageUser({ id, name, avatar });
								uni.showToast({
									title: "更新成功！",
									icon: "success"
								});
								setTimeout(() => {
									uni.navigateBack({
										delta: 1, //	url: '/pages/user/user'			
									});
								}, 1000)
							});
						}
					})
					.catch(() => {
						uni.showToast({
							title: "校验失败！",
							icon: "error"
						});
					});
			},

		}
	};
</script>
<style lang="scss" scoped>
	.the-page {
		padding: 20px;
	}

	uni-button {
		margin: 10px 0;
	}
</style>